<template>
  <div class="table-container">
    <el-table
      :data="tableDataLIst"
      border
      stripe
      size="mini"
      height="391"
      style="width: 100%">
      <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
      <el-table-column prop="student" label="老师"></el-table-column>
      <el-table-column prop="kecheng1" label="课程"></el-table-column>
      <el-table-column prop="kecheng2" label="班级"></el-table-column>
      <el-table-column prop="kecheng3" label="课堂纪律"></el-table-column>
      <el-table-column prop="kecheng4" label="提问次数"></el-table-column>
      <el-table-column prop="kecheng5" label="学生专注度"></el-table-column>
      <el-table-column prop="kecheng6" label="时间"></el-table-column>
    </el-table>

    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 40, 60, 80]"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total(tableDataLIst.length)">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ClassroomTableData",
    components: {},
    data() {
      let item = {
        student: '郈老师',
        kecheng1: '语文',
        kecheng2: '班级一',
        kecheng3: '-9',
        kecheng4: '98',
        kecheng5: '-5',
        kecheng6: '2019-10-10 10:10'
      };
      return {
        tableDataLIst: Array(30).fill(item),
        currentPage: 1,
        pageSize: 20
      }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      indexMethod(index) {
        return index + 1;
      },

      handleSizeChange(val) {
        this.pageSize = val;
      },

      handleCurrentChange(val) {
        this.currentPage = val;
      },

      total(num) {
        return num;
      }
    }
  }
</script>

<style scoped>
  .page{
    text-align: center;
    margin-top: 20px;
  }
</style>
